<template>
  <div v-if="mode==='login'">
    <LoginForm></LoginForm>

    <div class="flex justify-between  py-5">
      <n-button @click="mode='forget'" text>忘记密码？</n-button>
      <n-button @click="mode='register'" text type="primary"> 新用户账号注册</n-button>
    </div>
  </div>
  <div v-else-if="mode==='register'">
    <RegisterForm></RegisterForm>
    <div class="flex justify-center  py-5">
      <n-button @click="mode='login'" text type="primary"> 已有账号？去登录</n-button>
    </div>
  </div>
  <div v-else-if="mode==='forget'">
    <ForgetForm></ForgetForm>
    <div class="flex justify-between  py-5">
      <n-button @click="mode='login'" text type="primary">登录已有账户</n-button>
      <n-button @click="mode='register'" text type="primary"> 新用户账号注册</n-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import {ref} from "vue";
import LoginForm from "@/views/auth/components/LoginForm.vue";
import RegisterForm from "@/views/auth/components/RegisterForm.vue";
import ForgetForm from "@/views/auth/components/ForgetForm.vue";

const mode = ref('login')





</script>

<style scoped>

</style>